

Berta.EditorManager.addPlugin('Draggable', new Class(function() {

	return {
		extend: Berta.Editor,
		pluginName: 'Textline',

		// defaults for this particular plugin
		defaults: {
			pluginOptions: {

				// see defaults.pluginOptions in Berta.Editor class for inherited options
			}
		},

		constructor: function(options) {
			// call the parent with pluginName=null
			// Editor defaults get extended by this.defaults and then extended by options
			Berta.Editor.call(this, options);

			var pos = this.element.position();
			this.originalValue = [ pos.left, pos.top ];
			this.value = [ pos.left, pos.top ];
		},


		//   .______    __    __  .______    __       __    ______    ////////////////////////////////////////////////////////////
		//   |   _  \  |  |  |  | |   _  \  |  |     |  |  /      |   ////////////////////////////////////////////////////////////
		//   |  |_)  | |  |  |  | |  |_)  | |  |     |  | |  ,----'   ////////////////////////////////////////////////////////////
		//   |   ___/  |  |  |  | |   _  <  |  |     |  | |  |        ////////////////////////////////////////////////////////////
		//   |  |      |  `--'  | |  |_)  | |  `----.|  | |  `----.   ////////////////////////////////////////////////////////////
		//   | _|       \______/  |______/  |_______||__|  \______|   ////////////////////////////////////////////////////////////

		on: /* API */ function() {
			this.element.addClass('x-editable-on x-editable-draggable');

			var dragOptions = {
				handle: '.x-control-move',
				//containment: 'document',
				start: this._(onDragStart),
				stop: this._(onDragStop),
				drag: this._(onDrag)()
			};

			var g = Berta.Grid.instance();

			if(g.gridOn) {
				dragOptions.snap = true;
				dragOptions.grid = [ g.gridSpacingW, g.gridSpacingH ];
			}

			this.element.draggable(dragOptions);

			Berta.Editor.prototype.on.call(this);
		},

		off: /* API */ function() {
			this.element.removeClass('x-editable-on x-editable-draggable');
			this.element.draggable('destroy');

			Berta.Editor.prototype.off.call(this);
		},

		edit: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.ON)) {

			}
		},

		save: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.EDITING)) {
				if(this.value[0] != this.originalValue[0] || this.value[1] != this.originalValue[1]) this.fireChange();

				Berta.Editor.prototype.stopEditing.call(this);
				Berta.Editor.prototype.save.call(this, this._(onSaveComplete));
			}
		},

		cancel: /* API */ function() {
			if(this.hasFlag(Berta.Editor.flags.SAVING)) {
				this.saveStop();
			}

			this.value[0] = this.originalValue[0];
			this.value[1] = this.originalValue[1];
			this._(updateHTMLFromValue)();
			this.fireRevert();
			this.cleanup();
		},


		cleanup: function() {
			if(this.hasFlag(Berta.Editor.flags.DESTROYING)) {
				this.off();
			}
		},


		validate: /* override */ function() {
			Berta.Editor.prototype.validate.call(this);
		}


	};




	//   .______   .______     __  ____    ____  ___   .___________. _______    //////////////////////////////////////////////////
	//   |   _  \  |   _  \   |  | \   \  /   / /   \  |           ||   ____|   //////////////////////////////////////////////////
	//   |  |_)  | |  |_)  |  |  |  \   \/   / /  ^  \ `---|  |----`|  |__      //////////////////////////////////////////////////
	//   |   ___/  |      /   |  |   \      / /  /_\  \    |  |     |   __|     //////////////////////////////////////////////////
	//   |  |      |  |\  \--.|  |    \    / /  _____  \   |  |     |  |____    //////////////////////////////////////////////////
	//   | _|      | _| `.___||__|     \__/ /__/     \__\  |__|     |_______|   //////////////////////////////////////////////////


	function onDragStart(e, ui) {
		Berta.Editor.prototype.startEditing.call(this);

		$(e.target).stop();

		// Update originalPosition, if grid is turned on

		/*var posSnappedToGrid = Berta.Grid.instance().coordsToGrid(ui.helper);

		console.log(ui.originalPosition.left, ui.originalPosition.top);

		ui.originalPosition.left = posSnappedToGrid.left;
		ui.originalPosition.top = posSnappedToGrid.top;

		console.log(ui.originalPosition.left, ui.originalPosition.top);

		console.log(e, ui);*/
	}

	function onDragStop(e, ui) {
		// Save position in a cookie, for retrieval upon page reload

		if(Berta.Grid.instance().gridOn) {
			var pos = $(e.target).offset(),
				g = Berta.Grid.instance(),
				offsetPos = $(e.target).offsetParent().offset();
			pos.left = Math.round(pos.left / g.gridSpacingW) * g.gridSpacingW;
			pos.top = Math.round(pos.top / g.gridSpacingH) * g.gridSpacingH;

			if(offsetPos) {
				pos.left -= offsetPos.left;
				pos.top -= offsetPos.top;
			}

			$(e.target).stop().animate({ 'left': pos.left, 'top': pos.top }, 200);

		} else {
			var pos = $(e.target).position();
		}


		this.value = [ pos.left, pos.top ];

		this.save();

		//$.log('panel_position', pos, { 'path': Berta.URLBase.files + '/' });
		//jQuery.cookie('panel_position_left', pos.left, { 'path': Berta.URLBase.files + '/' });
		//jQuery.cookie('panel_position_top', pos.top, { 'path': Berta.URLBase.files + '/' });
	}

	function onDrag(e, ui) {
		
	}

	function onSaveComplete(response) {
		if (response.error) {
			//this.askIfCancelOnSaveErorr(response.errorMessage, this._(this.cancel), this._(this.edit));
			alert(response.errorMessage);
			this.cancel();

		} else {
			this.value[0] = response.json.values[this.options.variable[0]];
			this.value[1] = response.json.values[this.options.variable[1]];
			this._(updateHTMLFromValue)();

			this.fireSave();

			// update original value after calling the callback, so the callback can distinguish between the two
			this.originalValue = this.value;

			this.cleanup();
		}
	}


	function updateHTMLFromValue() {
		this.element.css('left', this.value[0]);
		this.element.css('top', this.value[1]);
	}


}()));



